import React from "react";
class Box extends React.Component{
    shouldComponentUpdate(nextProps, nextState) {
        if(this.props.current===this.props.index||nextProps.current===nextProps.index){
            return true
        }else{
            return false
        }
    }
    
    render(){
        console.log('render')
        return(
            <div style={{width:'100px',height:'100px',border:this.props.index===this.props.current?'1px solid red':'1px solid grey',float:'left'}}>
                
            </div>
        )
    }
}

export default class App extends React.Component{
    state={
        list:[1,2,3,4,5,6,7,8,9,10],
        current:1
    }
    render(){
        return (
            <div>
                <input onChange={(e)=>{
                    this.setState({current:Number(e.target.value)})
                }}/>

                <div style={{overflow:'hidden'}}>
                    {this.state.list.map((item,i)=>
                    <Box current={this.state.current} index={i} key={item}/>
                )}
                </div>
            </div>
        )
    }
}